<template>
  <div>
    <div class="index-stock">
      <div style="display: flex; justify-content: space-between">
        <div class="index-stock-title">
          <div class="index-stock-icon"></div>

          <span class="font-black">自定义股票名单</span>
        </div>
        <img
          src="@/assets/img/backup.png"
          alt=""
          style="cursor: pointer; height: 32px"
          @click="goBack"
        />
      </div>

      <div class="index-stock-content">
        <div class="index-box" v-for="(item, index) in indexStockList" :key="index">
          <div class="left">
            <div class="num">
              <span>{{ item.stockNum }}</span>
            </div>
            <div class="stock-name">
              <span class="title">{{ item.sConIrdname }}</span>
              <span class="type">{{ item.swIndustryName1 }}</span>
            </div>
          </div>
          <!-- <div class="right">
            <span class="title">{{ item.weight }}%</span>
            <span class="weight">股票权重</span>
          </div> -->
        </div>
      </div>
      <el-empty description="暂无数据" v-show="indexStockList.length === 0"></el-empty>
    </div>
    <div
      style="
        display: flex;
        justify-content: end;
        margin-top: 16px;
        margin-right: 20px;
        margin-bottom: 20px;
      "
    >
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { getW1055053 } from '@/api/etfpegging'
import eventBus from '@/utils/eventBus'

// Props definition
interface Props {
  shareCodes: string[]
}
const props = withDefaults(defineProps<Props>(), {
  shareCodes: () => [],
})

// Emits
const emit = defineEmits(['goBack'])

// Reactive state
const indexList = ref<string[]>([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const indexStockList = ref<any[]>([])

// Methods
const getData = (indexCustomerList?: any[], isParent?: boolean) => {
  if (isParent) {
    indexList.value = indexCustomerList?.map((item) => item?.sConIrdcode) || []
    currentPage.value = 1
  }

  const params = {
    strings: indexList.value,
    currentPage: currentPage.value,
    pageSize: pageSize.value,
  }

  getW1055053(params).then((res) => {
    if (res && res.data) {
      const records = res.data.records
      indexStockList.value = records.map((item: any, index: number) => ({
        ...item,
        stockNum: (currentPage.value - 1) * pageSize.value + index + 1,
      }))
      total.value = res.data.total
    }
  })
}

defineExpose({ getData })

const handleSizeChange = (val: number) => {
  pageSize.value = val
  currentPage.value = 1
  getData(indexList.value)
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getData(indexList.value)
}

const goBack = () => {
  eventBus.emit('resetResultList')
  eventBus.emit('resetSelectedList')
  emit('goBack')
}
</script>

<style scoped lang="scss">
.index-stock {
  margin: 12px 20px;
  .index-stock-title {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    .index-stock-icon {
      width: 6px;
      height: 19px;
      background: #2468f2;
      border-radius: 3px;
      margin-right: 8px;
    }

    .font-black {
      font-family: Source Han Sans CN;
      font-size: 18px;
      font-weight: 500;
      color: #000;
    }
    .svg-icon {
      width: 24px;
      height: 24px;
      color: #000;
    }
  }
  .index-stock-content {
    display: flex;
    flex-wrap: wrap;
    .index-box {
      background: linear-gradient(92.35deg, #ffffff 6.51%, #f8f9ff 98.03%);
      width: 302px;
      height: 74px;
      border-radius: 8px;
      border: 1px solid #dde6f6;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-right: 10px;
      margin-bottom: 10px;
      .left {
        display: flex;
        align-items: center;
        margin-left: 10px;
        .num {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 36px;
          height: 36px;
          border-radius: 12px;
          background: #f2f6ff;
          span {
            font-family: Source Han Sans CN;
            font-size: 14px;
            font-weight: 700;
            color: #40527b;
          }
        }
        .stock-name {
          display: flex;
          flex-direction: column;
          margin-left: 10px;
          align-items: center;
          .title {
            font-family: Source Han Sans CN;
            font-size: 16px;
            font-weight: 700;
            color: #000;
          }
          .type {
            font-family: Source Han Sans CN;
            font-size: 14px;
            font-weight: 350;
            color: #7b7f8d;
          }
        }
      }
      .right {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 20px;
        .title {
          font-family: Source Han Sans CN;
          font-size: 18px;
          font-weight: 700;
          color: #2468f2;
        }
        .weight {
          font-family: Source Han Sans CN;
          font-size: 14px;
          font-weight: 350;
          color: #7b7f8d;
        }
      }
    }
  }
}
</style>
